<template>
  <div class="wrapdiv">
    <el-row>
      <el-col style="margin: 10px">
        <el-button
          class="elbtn"
          type="primary"
          icon="el-icon-document-add"
          title="新建"
          @click="showadd"
          circle
        ></el-button>
      </el-col>
    </el-row>
    <el-row>
      <el-col>
        <el-table
          ref="multipleTable"
          :data="text_info_list"
          tooltip-effect="dark"
          style="width: 100%"
          stripe
                    :header-cell-style="{
            color: '#111',
            backgroundColor: 'rgba(20,20,20,.1)',
            borderRadius: '2px',
            border:'1px solid #fff'
          }"
        >
          <el-table-column type="index" width="55"> </el-table-column>
          <el-table-column prop="resource_id" label="节目id" width="300"> </el-table-column>
          <el-table-column
            prop="name"
            label="节目名称"
            width="200"
          ></el-table-column>
          <el-table-column prop="url" label="文字内容" > </el-table-column>
          <el-table-column prop="width" label="宽度" width="60"> </el-table-column>
          <el-table-column prop="height" label="高度" width="60"> </el-table-column>
          <el-table-column label="颜色" width="60">
            <template slot-scope="scope">
              <span
                :style="{
                  'background-color': scope.row.color,
                  color: scope.row.color,
                }"
                >颜色</span
              >
            </template>
          </el-table-column>
          <el-table-column label="背景" width="72">
            <template v-slot="scope">
              <span
                :style="{
                  'background-color': scope.row.back_color,
                  color: scope.row.back_color,
                }"
              >
                背景色
              </span>
            </template>
          </el-table-column>

          <el-table-column label="操作" width="120">
            <template slot-scope="scope">
              <!-- <div>
                <i class="el-icon-setting" @click="edit_group(scope.row.id)"></i>
              </div> -->
              <el-tooltip
                content="修改文本节目"
                placement="left-start"
                :enterable="false"
              >
                <el-button
                  type="primary"
                  :plain="true"
                  size="small"
                  icon="el-icon-edit"
                  @click="showedit(scope.row)"
                ></el-button>
              </el-tooltip>
              <el-button
                type="danger"
                :plain="false"
                size="small"
                icon="el-icon-delete"
                @click="deleteProgramText(scope.row.resource_id)"
              ></el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <Program_edit_text_dialog
      v-if="dialogformvisible_edit == true"
      :dialogformvisible_edit.sync="dialogformvisible_edit"
      :is_add="is_add"
      :text_info="text_info"
    ></Program_edit_text_dialog>

    <el-row style="margin:10px;background: linear-gradient(to right, #EAEAEA, #DBDBDB, #F2F2F2, #ADA996);">
      <el-col>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="pageNum"
          :page-sizes="[10, 20, 50]"
          :page-size="pageSize"
          layout="total,sizes, prev, pager, next"
          :total="total"
        >
        </el-pagination>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import Program_edit_text_dialog from "../components/Program_edit_text_dialog";
import LoginVue from "./Login.vue";
export default {
  name: "Resource_text",
  data() {
    //节目(视频,图片,文本, 资源不再单独建表,)
    //program_id,type, name, src  共用,  width,height,....background_color 是text节目专用
    //programs   (programid,type, name, src, width, height, fontsize, color, background_color )
    return {
      dialogformvisible_edit: false,
      is_add: false,
      text_info: {
        //编辑时,携带全部信息包括program_id,
        //新建时,不带id,
        resource_id: "null",
        name: "未命名",
        color: "#ff0000", //颜色选择器对 这种格式很友好,
        back_color: "#ffff00",
        url: "请输入信息",
        font_size: 20,
        width: 256,
        height: 160,
      },
      text_info_list: [],
      total:0,
      pageNum:1,
      pageSize:10,
    };
  },
  watch:{
     dialogformvisible_edit(v, oldval) {
      if (!v) {
        console.log("++++++++++++++++++");
        // this.getResource_texts();  //经常无效
        setTimeout(() => {
          this.getResource_texts();  //延时可以,否则,经常无效
        }, 1000);
      }
    },
  },
  components: {
    Program_edit_text_dialog,
  },
  mounted() {
    this.getResource_texts();
  },
  methods: {
    async getResource_texts() {
      let ret = await this.$http.get(
        `resourcesByPage?query=&type=text&pageNum=${this.pageNum}&pageSize=${this.pageSize}`
      );
      let {total, pageNum, resources } = ret.data.data;
      this.total = total;
      this.pageNum = pageNum;
      this.text_info_list = resources;
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.getResource_texts();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.pageNum = val;
      this.getResource_texts()
    },
    showadd() {
      this.is_add = true;
      //default
      this.text_info.resource_id = "null";
      this.text_info.name = "未命名新增";
      this.text_info.width = 32;//
      this.text_info.height = 32;//
      this.text_info.url = "";
      this.text_info.font_size = 20;
      this.text_info.color = "#00ff00"; //颜色选择器对 这种格式很友好,
      this.text_info.back_color = "#000000";
      this.dialogformvisible_edit = true;
    },
    
    async deleteProgramText(r_id) {
      
      console.log("delete program =>" + r_id);
      //向后台发送删除节目请求
      //this.$http.delete('program/${program_id}')
      //if  ok   then  get  program  text  list

      try {
        let isContinue = await this.$confirm(
          "删除文本节目 [将会同时删除对应的调度计划]!",
          "即将删除, 请确认操作!!!",
          {
            distinguishCancelAndClose: true,
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          }
        );

        if (isContinue != "confirm") return;
      } catch (err) {
        console.log("catch" + err);
        return;
      }

      let ret = await this.$http.delete("resources",{
        data:{resource_ids:[r_id]}
      })
      console.log(ret);
      this.getResource_texts();

    },

    showedit(a_text_info) {
      this.is_add = false;

      //根据选中的 文本节目,编辑
      // this.text_info = {
      //   program_id: "000000001",
      //   program_name: "文字信息编辑000",
      //   width: 600,
      //   height: 200,
      //   src: "请输入信息",
      //   fontsize: 20,
      //   color: "#ff0000", //颜色选择器对 这种格式很友好,
      //   background_color: "#000000",
      // };
      this.text_info = a_text_info;
      console.log(this.text_info);
      this.dialogformvisible_edit = true;
    },
  },
};
</script>
<style scoped>
.elbtn {
  font-size: 24px;
}
.wrapdiv{
  width: 98%;
  border-radius: 10px;
  box-shadow: 0 0 10px #aaa;
  padding: 10px;
}
</style>
